<template name="getSms">
	<view>
		<view class="getCode" @click="getCode">
			<text v-if="plan == 1">获取验证码</text>
			<text v-if="plan == 2">{{time}}秒后获取</text>
			<text v-if="plan == 3">重新获取</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "getSms",

		// 传入数据
		props: {
			// 内容
			event: {
				type: String,
				default: 'changemobile',
			},

			// 倒计时
			count: {
				type: Number,
				default: 60,
			},
		},

		// 页面变量
		data() {
			return {
				// 时间
				time: 60,
				// 定时器
				timer: '',
				// 进度 1获取验证码 2秒后获取 3重新获取验证码
				plan: 1,
			};
		},

		// 组件挂在之后
		mounted() {
			// 赋值倒计时
			this.time = this.count
		},

		// 组件被销之前
		beforeDestroy() {
			// 设置进度
			this.plan = 1;

			// 清除定时器
			clearInterval(this.timer);
		},

		// 方法集
		methods: {
			getCode() {
				// 赋值this
				var that = this;

				// 判断有无手机号
				if (!that.$parent.wrap.mobile) {
					// 弹窗提示
					that.alert('请填写手机号');
					return;
				} else if (that.$parent.wrap.mobile.length != 11) {
					// 弹窗提示
					that.alert('请输入正确的手机号码');
					return;
				}

				// 判断当前进度
				if (that.plan == 2) {
					// 弹窗提示
					that.alert('请稍后获取验证码');
					return;
				}

				// 设置进度
				that.plan = 2;

				// 定时器
				that.timer = setInterval(() => {
					// 清除定时器
					if (that.time > 0) {
						// 减少时间
						that.time--;
					} else {
						// 设置进度
						that.plan = 3;

						// 清除定时器
						clearInterval(that.timer);
					}
				}, 1000);

				// 请求接口 
				that.request({
					url: '/api/sms/send',
					// 上传数据
					data: {
						// 手机号
						mobile: that.$parent.wrap.mobile,
						// 场景
						event: that.event,
					},
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 弹窗提示
							that.alert('验证码已发送');
						} else {
							//弹窗提示用户
							that.alert(rs.msg);

							// 设置进度
							that.plan = 3;

							// 清除定时器
							clearInterval(that.timer);
						}
					}
				})
			},
		},
	}
</script>

<style lang="less">
	// 获取验证码
	.getCode {
		white-space: nowrap;
	}
</style>
